<template>
  <view>
    <view class="comment-item" v-for="item in list" :key="item.comment_id">
      <view class="user-info">
        <view class="avatar">
          <image :src="item.user.avatar_url || defaultAvatar"></image>
        </view>
        <text class="name">{{item.user.nick_name}}</text>
        <view class="star">
          <uni-icons type="star-filled" size="14" color="#f4a213" v-for="(item,index) in item.star" :key="index"></uni-icons>
          <uni-icons v-if="item.hasHalf" type="starhalf" size="24" color="#f4a213"></uni-icons>
        </view>
      </view>
      <view class="content">{{item.content}}</view>
      <view v-for="image in item.images" :key="image.id" class="content-pic" @click="previewImage(item.images,image.file.preview_url)">
        <image :src="image.image_url"></image>
      </view>
      <view :class="timePosition">{{item.create_time}}</view>
    </view>
  </view>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
  props:{
    data:{
      type:Array,
      default(){
        return {
          imagesList:[],
        }
      }
    },
    timePosition:{
      type:String,
      default: 'time-bottom'
    }
  },
  data(){
    return {
      list:[]
    }
  },
  computed:{
    ...mapGetters(['defaultAvatar'])
  },
  watch:{
    data:{
      immediate:true,
      deep:true,
      handler(val){
        this.list = val.map(item => {
          const hasHalf = false
          const score = item.score / 2
          if (String(score).includes('.')) hasHalf =true
          return {
            ...item,
            hasHalf,
            star: +score.toFixed(),
          }
        })
      }
    }
  },
  methods:{
    previewImage(urls,current){
      urls = urls.map(item => item.file.preview_url)
      wx.previewImage({
        urls,
        current
      })
    }
  }
}
</script>

<style lang="scss">
  image {
    width: 100%;
    height: 100%;
  }
  .comment-item {
    position: relative;
    padding: 15rpx 30rpx;
    border-bottom: 1rpx solid #fafafa;
    .user-info {
      display: flex;
      align-items: center;
      .avatar {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        overflow: hidden;
      }
      .name {
        margin: 0 10rpx;
        font-size: 24rpx;
        color: #999999;
      }
    }
    .content {
      margin: 15rpx 0;
      font-size: 26rpx;
    }
    .content-pic {
      display: inline-block;
      margin-bottom: 30rpx;
      width: 33.33%;
      height: 220rpx;
    }
    .time-bottom {
      font-size: 22rpx;
      color: #999999;
    }
    .right {
      position: absolute;
      top: 30rpx;
      right:30rpx;
      font-size: 22rpx;
      color: #999999;
    }
  }
</style>